<template>

  <div>
    <Layout>
      <Content class="layout-content">

        <Row>
          <Col span="24">
            <Tabs>
              <TabPane :label="origin">
                <Row v-for="header in headers">
                  <Col span="1">
                    <Checkbox v-model="header.enabled"></Checkbox>
                  </Col>

                  <Col span="5">
                    <Input v-model="header.key" placeholder="请输入headerName" style="width: 200px"/>

                  </Col>
                  <Col span="5">
                    <Input v-model="header.value" placeholder="请输入headerValue" style="width: 200px"/>
                  </Col>

                  <Col span="6">
                    <Icon type="md-add" size="20" @click="add()"/>
                    <Icon type="md-remove" size="20" @click="remove(header)"/>
                  </Col>
                </Row>
              </TabPane>
              <!--              <TabPane label="标签二" disabled>标签二的内容</TabPane>-->
              <!--              <TabPane label="标签三">标签三的内容</TabPane>-->
            </Tabs>
          </Col>
        </Row>
        <Divider/>
        <Row>
          <Col span="24">
            <Button type="primary" @click="saveHeaders">保存</Button>
          </Col>
        </Row>
      </Content>
    </Layout>

  </div>


</template>
<script setup>
import {onMounted, ref, toRaw, inject, getCurrentInstance} from "vue";
import moment from "moment";
import {Message} from 'view-ui-plus'
import {nextTick, debounce, setValue, getValue} from '../utils'
import _ from "lodash";
import {v4 as uuidv4} from 'uuid';

const headers = ref([]);

const origin = ref(window.location.origin)
const firstCheck = () => {
  if (!headers || headers.value.length <= 0) {
    add();
  }
}

const saveHeaders = () => {
  //设置值
  setValue({
    [origin.value]: toRaw(headers.value)
  });

  Message.info("保存成功");
  // Reflect.set("window", 'editor', editor)
}


const add = () => {
  headers.value.push({
    key: "",
    value: "",
    enabled: false,
    id: uuidv4()
  });
}


const remove = (header) => {
  const tempHeaders = toRaw(headers.value);

  var evens = _.remove(tempHeaders, function (n) {
    return n.id != header.id;
  });
  headers.value = evens;

  firstCheck();
}


onMounted(() => {
  firstCheck();

  getValue(function (value) {
    if (value) {
      const hes = value[origin.value];
      if (hes && hes.length > 0) {
        headers.value = hes;
      }
      firstCheck();
    }
  });
})
//

</script>
<style scoped>
</style>